import { GridContent } from "@ant-design/pro-components";
import { Card, Col, Row, Tabs } from "antd";
import React, { useState } from "react";
import Invite from "./component/Invite/invite";
import News from "./component/News/news";
import Video from "./component/Video/video";

export type tabKeyType = "Invite" | "News" | "Video";
const operationTabList = [
  { label: "邀请审批", key: "Invite" },
  { label: "新闻审批", key: "News" },
  { label: "视频审批", key: "Video" }
];
const Verify: React.FC = () => {
  const [tabKey, setTabKey] = useState<tabKeyType>("Invite");
  const handleOnChange = (activeKey: string) =>
    setTabKey(activeKey as tabKeyType);
  // 渲染tab切换
  const renderChildrenByTabKey = (tabValue: tabKeyType) => {
    switch (tabValue) {
      case "Invite":
        return <Invite />;
      case "News":
        return <News />;
      case "Video":
        return <Video />;
      default:
        return <Invite />;
    }
  };
  return (
    <GridContent>
      <Row gutter={24}>
        <Col lg={24} md={24}>
          <Card
            style={{
              marginBottom: "20px"
            }}
            bodyStyle={{
              padding: "10px"
            }}
          >
            <Tabs
              style={{ paddingLeft: "14px" }}
              defaultActiveKey="1"
              items={operationTabList}
              onChange={handleOnChange}
            />
          </Card>
        </Col>
        <Col lg={24} md={24}>
          {renderChildrenByTabKey(tabKey)}
        </Col>
      </Row>
    </GridContent>
  );
};
export default Verify;
